<template>
    <view class="content">
        <view class="item" v-for="(item, index) in list" :key="index" @click="$gTo(`./details?id=${item.id}`)">
        	<view class="item-left">
        		<view class="i-tit u-line-2">{{item.title}}</view>
        		<view class="i-sub">{{item.ftitle}}</view>
        	</view>
        	<image :src="item.image_uri" class="item-img"></image>
        </view>
		
		<view style="height: 94rpx;padding-top: 30rpx;">
		    <u-loadmore :status="status" v-if="status != 'loadmore'" />
		</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                status: 'loadmore', //是否显示没有更多了
                page: 1,
                list: [],
            };
        },
        onLoad() {
            this.getList()
        },
		onReachBottom() {
			if(this.page == 1){return}
			this.getList()
		},
        methods: {
            getList() {
            	if (this.status == 'nomore') return;
            	this.status = 'loading';
            	this.$ajax('broadcast', {
                    userToken: this.$getSync('userToken'),
                    page: this.page,
                    limit: 10,
                }).then(ret => {
            		if (ret.status == 0) {
                        if (ret.data.length > 0) {
                        	this.list = this.list.concat(ret.data);
                        	this.page++;
                        	this.status = 'loadmore'
                        } else {
                        	this.status = 'nomore'
                        }
            		} else {
            			this.$toast(ret.message);
            		}
            	});
            },
        }
    };
</script>

<style lang="scss">
    page{
        background-color: #fff;
    }
	.content{
		padding: 0 18rpx;
		border-top: 2rpx solid #eaebf0;
	}
	
	.item{
		padding: 40rpx 0;
		border-bottom: 2rpx solid #eaebf0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.item-left{
		flex: 1;
		padding-right: 20rpx;
	}
	.i-tit{
		font-size: 30rpx;
		font-weight: bold;
	}
	.i-sub{
		font-size: 24rpx;
		color: #81849f;
		padding-top: 14rpx;
		width: 486rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.item-img{
		width: 196rpx;
		height: 146rpx;
		border-radius: 10rpx;
	}

</style>
